<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :fullscreen.sync="fullscreen"
    @cancel="handleCancel"
    :footer="null"
  >
    <a-card :bordered="false" style="margin-top: -15px">
      <detail-list title="单据信息">
        <detail-list-item term="订单状态">
          <!-- 0新建 1支付成功 2作废 3超时未支付 4已完成  -->
          <a-tag color="orange" v-if="model.orderStatus === 0">新建</a-tag>
          <a-tag color="blue" v-if="model.orderStatus === 1">下单成功</a-tag>
          <a-tag color="red" v-if="model.orderStatus === 2">作废</a-tag>
          <a-tag color="red" v-if="model.orderStatus === 3">超时未付</a-tag>
          <a-tag color="blue" v-if="model.orderStatus === 4">已完成</a-tag>
        </detail-list-item>
        <detail-list-item term="单号">{{ model.orderNo }}</detail-list-item>
        <detail-list-item term="所属机构">{{ model.orgName }}</detail-list-item>
        <detail-list-item term="下单门店">{{ model.shopName }}</detail-list-item>
        <detail-list-item term="收银员姓名">{{ model.operUserName }}</detail-list-item>
        <detail-list-item term="收银时间">{{ model.operTime }}</detail-list-item>
      </detail-list>
      <a-divider style="margin: 15px 0" />
      <detail-list title="单据金额">
        <detail-list-item term="付款状态">
          <!-- （0待支付 1支付成功 2支付失败 3支付撤销  ） -->
          <a-tag color="orange" v-if="model.payStatus === 0">待支付</a-tag>
          <a-tag color="blue" v-if="model.payStatus === 1">支付成功</a-tag>
          <a-tag color="red" v-if="model.payStatus === 2">支付失败</a-tag>
          <a-tag color="red" v-if="model.payStatus === 3">支付撤销</a-tag>
        </detail-list-item>
        <detail-list-item term="订单总金额(元)">{{ model.orderAmount }}</detail-list-item>
        <detail-list-item term="活动优惠(元)">{{ 0 - model.actDisAmount }}</detail-list-item>
        <!-- <detail-list-item term="优惠券(元)">{{
          model.couponDetailOutVos && model.couponDetailOutVos.length > 0
            ? 0 - model.couponDetailOutVos[0].disVal + ' (' + model.couponDetailOutVos[0].relateActOrCouponName + ')'
            : '0'
        }}</detail-list-item> -->
        <detail-list-item term="优惠券(元)">{{
          model.couponDisAmount && parseFloat(model.couponDisAmount) > 0
            ? '-' +  parseFloat(model.couponDisAmount) + ' (' + model.couponName + ')'
            : '0'
        }}</detail-list-item>
        <detail-list-item term="积分抵扣(元)">{{
          model.orderDisPointsOutVo
            ? 0 -
              model.orderDisPointsOutVo.pointsRecudeAmount +
              ' (' +
              (0 - model.orderDisPointsOutVo.usePoints + '积分)')
            : '0'
        }}</detail-list-item>
        <detail-list-item term="优惠合计(元)">{{ 0 - model.totalDisAmount }}</detail-list-item>
        <detail-list-item term="实收总金额(元)"
          ><span style="color: red">{{ model.payAmount }}</span></detail-list-item
        >
        <detail-list-item term="支付方式">{{ model.payWay }}</detail-list-item>
      </detail-list>
      <a-divider style="margin: 15px 0" />
      <detail-list title="下单会员" v-if="model.memberId != '0'">
        <detail-list-item term="会员姓名">{{ model.realName }}</detail-list-item>
        <detail-list-item term="会员手机号">{{ model.mobile }}</detail-list-item>
        <detail-list-item term="获得积分">{{ model.givePoints }}</detail-list-item>
      </detail-list>
    </a-card>
    <!-- 明细 -->
    <a-card
      style="margin-top: -15px"
      :bordered="false"
      :tabList="tabList"
      :activeTabKey="activeTabKey"
      @tabChange="
        (key) => {
          this.activeTabKey = key
        }
      "
    >
      <a-table
        v-if="activeTabKey === '1'"
        :bordered="true" size="middle"
        :columns="goodsColumns"
        :dataSource="orderGoodsOutVoList"
        :pagination="false"
      >
        <span slot="photo" slot-scope="text, record">
          <a-avatar shape="square" :src="text + '?x-oss-process=image/resize,w_50,h_50'" @click="text ? previewImgObject([text]) : () => {}"> </a-avatar>
        </span>
      </a-table>
      <a-table
        v-if="activeTabKey === '2'"
        :bordered="true" size="middle"
        :columns="payRecordColumns"
        :dataSource="posPayRecordOutVos"
        :pagination="false"
      >
        <span slot="payType" slot-scope="text, record">
          <span v-if="text === 1">现金</span>
          <span v-if="text === 2">在线支付</span>
        </span>
      </a-table>
      <a-table
        v-if="activeTabKey === '3'"
        :bordered="true"
        size="middle"
        :columns="detailPayListColumns"
        :dataSource="orderDetailPayListOutVos"
        :pagination="false"
      >
      </a-table>
    </a-card>
    <a-card type="inner" title="退款信息" v-if="model.refundFlag === 1">
      <template v-for="(item,index) in refundList">
        <detail-list size="small" style="margin-bottom: 20px" :key="'x'+index">
          <detail-list-item term="退单号">{{item.refundNo}}</detail-list-item>
          <detail-list-item term="退款时间">{{item.refundTime}}</detail-list-item>
          <detail-list-item term="退款原因">{{item.refundReason}}</detail-list-item>
          <detail-list-item term="备注">{{item.remarks}}</detail-list-item>
          <detail-list-item term="退回积分">{{item.orderRefundVo.totalRefundPoints}}</detail-list-item>
          <detail-list-item term="退款总额">{{item.orderRefundVo.totalRefundAmount}}</detail-list-item>
          <a-table :bordered="true" size="middle" :columns="refundColumns" :dataSource="item.refundDetailInfoOutVos" :pagination="false" />
        </detail-list>
        <a-divider :key="'y'+index" v-if="index < refundList.length - 1" :dashed="true"></a-divider>
      </template>
    </a-card>
  </j-modal>
</template>

<script>
import PageLayout from '@/components/page/PageLayout'
import STable from '@/components/table/'
import DetailList from '@/components/tools/DetailList'
import ABadge from 'ant-design-vue/es/badge/Badge'
import { postAction } from '@/api/manage'
const DetailListItem = DetailList.Item
import { previewImgObject } from '@/utils/util'

export default {
  components: {
    PageLayout,
    ABadge,
    DetailList,
    DetailListItem,
    STable,
  },
  name: 'PosCashierOrderModal',
  data() {
    return {
      title: '操作',
      fullscreen: true,
      visible: false,
      previewImgObject,
      params: {},
      model: {},
      refundList: {},
      orderGoodsOutVoList: [],
      posPayRecordOutVos: [],
      orderDetailPayListOutVos: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      tabList: [
        {
          key: '1',
          tab: '商品明细',
        },
        {
          key: '2',
          tab: '付款明细',
        },
        // {
        //   key: '3',
        //   tab: '付款分摊明细',
        // },
      ],
      activeTabKey: '1',
      confirmLoading: false,
      validatorRules: {},
      goodsColumns: [
      {
          title: '品牌',
          dataIndex: 'brandName',
          key: 'brandName',
          align: 'center',
        },
        {
          title: '商品图片',
          dataIndex: 'photo',
          key: 'photo',
          align: 'center',
          scopedSlots: { customRender: 'photo' },
        },

        {
          title: 'SKU编码',
          dataIndex: 'itemSku',
          key: 'itemSku',
          align: 'center',
        },
        {
          title: '商品名称',
          dataIndex: 'itemShortName',
          key: 'itemShortName',
          align: 'center',
        },
        {
          title: '颜色',
          dataIndex: 'itemColor',
          key: 'itemColor',
          align: 'center',
        },
        {
          title: '尺码',
          dataIndex: 'itemSize',
          key: 'itemSize',
          align: 'center',
        },
        {
          title: '数量（件）',
          dataIndex: 'cnt',
          key: 'cnt',
          align: 'center',
        },
        {
          title: '销售单价(元)',
          dataIndex: 'salePrice',
          key: 'salePrice',
          align: 'center',
        },
        {
          title: '销售总价(元)',
          dataIndex: 'saleAmount',
          key: 'saleAmount',
          align: 'center',
        },
        {
          title: '活动优惠(元)',
          dataIndex: 'disAmount',
          key: 'disAmount',
          align: 'center',
          customRender: (text, recod) => {
            return text > 0 ? '-' + text : 0
          },
        },
        {
          title: '手工优惠(元)',
          dataIndex: 'adjustAmount',
          key: 'adjustAmount',
          align: 'center',
          customRender: (text, recod) => {
            return text > 0 ? '-' + text : 0
          },
        },
        {
          title: '积分抵扣(元)',
          dataIndex: 'pointsDisAmount',
          key: 'pointsDisAmount',
          align: 'center',
          customRender: (text, recod) => {
            return text > 0 ? '-' + text : 0
          },
        },
        {
          title: '卡券优惠(元)',
          dataIndex: 'couponDisAmount',
          key: 'couponDisAmount',
          align: 'center',
          customRender: (text, recod) => {
            return text > 0 ? '-' + text : 0
          },
        },
        {
          title: '优惠合计(元)',
          dataIndex: 'totalDisAmount',
          key: 'totalDisAmount',
          align: 'center',
          customRender: (text, record) => {
            let dis = parseFloat(record.saleAmount) - parseFloat(record.payAmount)
            return dis > 0 ? '-' + dis.toFixed(2) : 0
          },
        },
        {
          title: '实付总金额(元)',
          dataIndex: 'payAmount',
          key: 'payAmount',
          align: 'center',
        },
      ],
      payRecordColumns: [
        {
          title: '支付方式',
          dataIndex: 'payType',
          key: 'payType',
          align: 'center',
          scopedSlots: { customRender: 'payType' },
        },
        {
          title: '实付金额(元)',
          dataIndex: 'payAmount',
          key: 'payAmount',
          align: 'center',
        },
        {
          title: '支付时间',
          dataIndex: 'paySuccTime',
          key: 'paySuccTime',
          align: 'center',
        },
        {
          title: '在线支付渠道',
          dataIndex: 'paySource',
          key: 'paySource',
          align: 'center',
          customRender: (text, recod) => {
            return text ? text : '-'
          },
        },
        {
          title: '在线第三方单号',
          dataIndex: 'payThirdNo',
          key: 'payThirdNo',
          align: 'center',
          customRender: (text, recod) => {
            return text ? text : '-'
          },
        },
      ],
      detailPayListColumns: [
        {
          title: 'SKU编码',
          dataIndex: 'itemSku',
          key: 'itemSku',
        },
        {
          title: '商品名称',
          dataIndex: 'itemShortName',
          key: 'itemShortName',
        },
        {
          title: '颜色',
          dataIndex: 'itemColor',
          key: 'itemColor',
        },
        {
          title: '尺码',
          dataIndex: 'itemSize',
          key: 'itemSize',
        },
        {
          title: '数量（件）',
          dataIndex: 'cnt',
          key: 'cnt',
          align: 'right',
        },
        {
          title: '单价',
          dataIndex: 'salePrice1',
          key: 'salePrice1',
          align: 'right',
        },
        {
          title: '总金额',
          dataIndex: 'totalAmount',
          key: 'totalAmount',
          align: 'right',
          customRender: (value, row, index) => {
            return parseFloat(row.salePrice1) * parseInt(row.cnt)
          },
        },
        {
          title: '现金分摊金额(元)',
          dataIndex: 'cashShareAmount',
          key: 'cashShareAmount',
          align: 'right',
        },
        {
          title: '在线支付分摊金额(元)',
          dataIndex: 'onlinePayShareAmount',
          key: 'onlinePayShareAmount',
          align: 'right',
        },
        {
          title: '活动分摊金额(元)',
          dataIndex: 'actShareAmount',
          key: 'actShareAmount',
          align: 'right',
        },
        {
          title: '优惠券分摊金额(元)',
          dataIndex: 'couponShareAmount',
          key: 'couponShareAmount',
          align: 'right',
        },
        {
          title: '积分抵扣分摊金额(元)',
          dataIndex: 'pointsShareAmount',
          key: 'pointsShareAmount',
          align: 'right',
        },
      ],
      refundColumns: [
      {
          title: '品牌',
          dataIndex: 'brandName',
          key: 'brandName',
          align: 'center',
        },
        {
          title: 'SKU编码',
          dataIndex: 'itemSku',
          align: 'center',
        },
        {
          title: '商品名称',
          dataIndex: 'itemShortName',
          align: 'center',
        },
        {
          title: '颜色',
          dataIndex: 'itemColor',
          align: 'center',
        },
        {
          title: '尺码',
          dataIndex: 'itemSize',
          align: 'center',
        },
        {
          title: '退货数量',
          dataIndex: 'refundCnt',
          align: 'center',
        },
        {
          title: '退货金额',
          dataIndex: 'refundAmount',
          align: 'center',
        },
      ],
      url: {
        detail: '/cashier/posCashierOrder/v2/orderInfo',
        refundDetail:'/cashier/posOrderRefund/queryDetailByIds',
      },
    }
  },
  created() {},
  methods: {
    clear() {
      this.model = {}
      this.orderGoodsOutVoList = []
      this.posPayRecordOutVos = []
      this.activeTabKey = '1'
    },
    view(recordId, orgName) {
      this.model.orgName = orgName
      this.orderDetail(recordId)
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.clear()
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    orderDetail(recordId) {
      let that = this
      postAction(this.url.detail + '/' + recordId, this.params).then((res) => {
        if (res.success) {
          let orgName = this.model.orgName
          this.model = res.result
          this.model.orgName = orgName
          this.orderGoodsOutVoList = this.model.orderGoodsOutVoList
          this.posPayRecordOutVos = this.model.posPayRecordOutVos
          this.orderDetailPayListOutVos = this.model.orderDetailPayListOutVos
          this.queryOrderRefund()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    queryOrderRefund() {
      let orderRefundVo = this.model.orderRefundVo
      if (orderRefundVo) {
        let refundIds = orderRefundVo.refundIds
        if (refundIds) {
          let param = {
            refundIds: refundIds,
          }
          postAction(this.url.refundDetail, param).then((res) => {
            if (res.success) {
              this.refundList = res.result;
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
</style>